<template>
  <div id="app">
    <BasicLayout v-if="!isLoginPage">
      <router-view></router-view>
    </BasicLayout>
    <router-view v-else></router-view>

    <!-- 浮动操作按钮 -->
    <FloatingActionButton />
  </div>
</template>

<script setup lang="ts">
  import { useLoginUserStore } from '@/stores/useLoginUserStore'
  import { useThemeStore } from '@/stores/useThemeStore'
  import BasicLayout from '@/layouts/BasicLayout.vue'
  import { computed, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import FloatingActionButton from '@/components/FloatingActionButton.vue'

  const loginUserStore = useLoginUserStore()
  const themeStore = useThemeStore()

  // 初始化用户信息和主题
  onMounted(() => {
    loginUserStore.fetchLoginUser()
    themeStore.initTheme()
  })

  const route = useRoute()

  // 判断是否是登录页面
  const isLoginPage = computed(() => {
    return (
      route.path === '/user/login' ||
      route.path === '/user/register' ||
      route.path === '/user/profile' ||
      route.path === '/user/resetPassword' ||
      route.path.startsWith('/s/')
    ) // 添加分享页面路径
  })
</script>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  #app {
    height: 100%;
    overflow: auto;
  }

  /* 隐藏默认滚动条，只在内容超出时显示 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
  }
</style>
